<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑学生</title>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

<body>
</head>
<div id="app">

    <a href="goods_list.html">返回列表页</a>

    <table id="tid" border="1">
        <tr>
            <td>商品名称</td>
            <td><input v-model="goods.name" /> </td>
        </tr>
        <tr>
            <td>商品名称</td>
            <td>
                <!-- <input name="cId" /> -->
                <select v-model="goods.category_id">
                    <option value="">--请选择--</option>
                    <option v-for="(category,index) in classesList" :key="index" :value="category.id">{{category.name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>商品介绍</td>
            <td><input v-model="goods.introduction"/> </td>
        </tr>
        <tr>
            <td>商品价格</td>
            <td><input v-model="goods.price" /> </td>
        </tr>
        <tr>
            <td>商品库存</td>
            <td><input v-model="goods.store_num" /> </td>
        </tr>
        <tr>
            <td>发布时间</td>
            <td><input type="date" v-model="goods.create_time"/> </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="提交" @click="editStudent"/></td>
        </tr>

    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            goods: {          //表单对象
                cid: ''
            },
            classesList: []     //班级列表
        },
        mounted() {

            // 查询所有班级
            this.findAllClasses()
        },
        methods: {

            findAllClasses() {
                var url = `/category`;
                axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.classesList = response.data.data
                            // 查询详情
                            this.findById()
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            },
            findById() {
                // 获得id
                var arr = location.href.split("?id=")
                var id = arr[1]
                // 路径
                var url = `/goods/${id}`;

                axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.goods = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            },
            editStudent() {
                var url = `/goods`;
                axios.put(url, this.goods)
                    .then( response => {
                        if(response.data.code == 1){
                            // 成功提示
                            alert(response.data.message)
                            // 跳转
                            location.href = "goods_list.html"
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            },

        },
    })
</script>